<template>
	<list-box :name="name" word="一对一服务，精准定位你的爱情" :params="params">
		<!-- {{hongniangData}} -->
		<swiper class="list-swiper" next-margin="450rpx" :style="{height: `${200*rows}rpx`}">
			<swiper-item class="swiper-item" v-for="(item, index) in hongniangData" :key="index">
				<!-- rows=4
				 slice(start, end) 获取数组中指定范围元素数组，包头不包尾
				 开始下标：0，结束下标4
				 index*rows, (index+1)*rows
				 -->
				<!-- <xq-item v-for="(item, i) in courseData.slice(index*rows, (index+1)*rows)" :key="i" :item="item"></xq-item> -->
				<hl-item @fatherMethod="fatherMethod" :item="item"></hl-item>
			</swiper-item>
		</swiper>
	</list-box>
</template>

<script>
	import listBox from './list-box.vue'
	import hlItem from '@/components/common/hl-item.vue'
	import courseData from '@/mock/courseData.js'
	export default {
		methods: {

			fatherMethod(QR_Code) {
				this.$emit('father',QR_Code);
			
			},
		},
		components: {
			listBox,
			hlItem
		},
		props: {
			name: {
				type: String,
				default: '相亲活动'
			},
			word: { // HOT
				type: String,
				default: null
			},
			column: { // 默认swiper-item展示2列
				type: Number,
				default: 6
			},
			rows: { // 默认4行
				type: Number,
				default: 5
			},
			hongniangData: {},

			params: Object, // 点击`1全部`按钮要向搜索页传递的查询条件
		}
	}
</script>

<style lang="scss">
	.list-swiper {
		height: 520rpx !important;
	}
</style>